import React, { Component } from 'react'
import { Button, Form, Input, Row, Col, Modal, message } from 'antd';
import classNames from 'classnames';
import auth from '../../common/auth';
const FormItem = Form.Item;

function noop() {
  return false;
}

let UpdatePwdModal = React.createClass({
  getInitialState() {
    return {
      passBarShow: false, // 是否显示密码强度提示条
      rePassBarShow: false,
      passStrength: 'L', // 密码强度
      rePassStrength: 'L',
      visible: false,
      loading:false
    };
  },

  handleSubmit() {
    let t = this;
    this.props.form.validateFields((errors, values) => {
      if (!!errors) {
        return;
      }
      this.setState({loading: true});
      let params ={
        oldpass:values.oldpass,
        password:values.password
      };
    this.props.form.resetFields();
    auth.fetch("/sys/user/updatemyinfo",params,function(result){
         
          if(result.result =='0'){
              message.success('密码修改成功！',10);
              //返回状态改父组件。并关闭当前窗口
             this.props.callbackParent({visible:false});
             this.props.form.resetFields();
           }else{
               message.error(result.message ,10);
           }
       }.bind(this));
     this.setState({loading: false});
    });
  },

  getPassStrenth(value, type) {
    if (value) {
      let strength;
      // 密码强度的校验规则自定义，这里只是做个简单的示例
      if (value.length < 6) {
        strength = 'L';
      } else if (value.length <= 9) {
        strength = 'M';
      } else {
        strength = 'H';
      }
      if (type === 'pass') {
        this.setState({ passBarShow: true, passStrength: strength });
      } else {
        this.setState({ rePassBarShow: true, rePassStrength: strength });
      }
    } else {
      if (type === 'pass') {
        this.setState({ passBarShow: false });
      } else {
        this.setState({ rePassBarShow: false });
      }
    }
  },

  showModal() {
    this.setState({ visible: true });
  },

  hideModal ()  {
    //this.setState({ visible: false });
    this.props.callbackParent({visible:false});
    this.props.form.resetFields();
  },

  checkPass(rule, value, callback) {
    const form = this.props.form;
    this.getPassStrenth(value, 'pass');

    if (form.getFieldValue('pass')) {
      form.validateFields(['rePass'], { force: true });
    }

    callback();
  },

  checkPass2(rule, value, callback) {
    const form = this.props.form;
    this.getPassStrenth(value, 'rePass');

    if (value && value !== form.getFieldValue('pass')) {
      callback('两次输入密码不一致！');
    } else {
      callback();
    }
  },

  renderPassStrengthBar(type) {
    const strength = type === 'pass' ? this.state.passStrength : this.state.rePassStrength;
    const classSet = classNames({
      'ant-pwd-strength': true,
      'ant-pwd-strength-low': strength === 'L',
      'ant-pwd-strength-medium': strength === 'M',
      'ant-pwd-strength-high': strength === 'H'
    });
    const level = {
      L: '低',
      M: '中',
      H: '高'
    };

    return (
      <div>
        <ul className={classSet}>
          <li className="ant-pwd-strength-item ant-pwd-strength-item-1"></li>
          <li className="ant-pwd-strength-item ant-pwd-strength-item-2"></li>
          <li className="ant-pwd-strength-item ant-pwd-strength-item-3"></li>
          <span className="ant-form-text">
            {level[strength]}
          </span>
        </ul>
      </div>
    );
  },

  render() {
    const { getFieldDecorator } = this.props.form;
    const formItemLayout = {
      labelCol: { span: 6 },
      wrapperCol: { span: 18 },
    };
    this.state.visible =this.props.visible;
    return (
      <div>
        <Modal title="修改密码" confirmLoading={this.state.loading} visible={this.state.visible} onOk={this.handleSubmit} onCancel={this.hideModal}>
          <Form horizontal form={this.props.form}>
          <Row>
            <Col span="19">
              <FormItem
                {...formItemLayout}
                label="旧密码：">
                {getFieldDecorator('oldpass',{
                    rules: [
                      { required: true, whitespace: true, message: '请输入旧密码' }
                    ]
                  })(
                      <Input  type="password"
                        onContextMenu={noop} onPaste={noop} onCopy={noop} onCut={noop}
                       autoComplete="off" id="oldpass" />
                )}  
              </FormItem>
            </Col>
            <Col span="5">

            </Col>
          </Row>

            <Row>
              <Col span="19">
                <FormItem
                  {...formItemLayout}
                  label="新密码：">
                  {getFieldDecorator('pass',{
                     rules: [
                            { required: true, whitespace: true, message: '请输入新密码' },
                            { validator: this.checkPass }
                          ]
                  })(<Input type="password"
                    onContextMenu={noop} onPaste={noop} onCopy={noop} onCut={noop}
                    autoComplete="off" id="pass" />)
                  }
                </FormItem>
              </Col>
              <Col span="5">
                {this.state.passBarShow ? this.renderPassStrengthBar('pass') : null}
              </Col>
            </Row>

            <Row>
              <Col span="19">
                <FormItem
                  {...formItemLayout}
                  label="确认密码：">
                   {getFieldDecorator('rePass',{
                     rules: [{
                        required: true,
                        whitespace: true,
                        message: '请再次输入密码',
                      }, {
                        validator: this.checkPass2,
                      }],
                  })( <Input type="password"
                    onContextMenu={noop} onPaste={noop} onCopy={noop} onCut={noop}
                    autoComplete="off" id="rePass" />)
                  }
                </FormItem>
              </Col>
              <Col span="5">
                {this.state.rePassBarShow ? this.renderPassStrengthBar('rePass') : null}
              </Col>
            </Row>
          </Form>
        </Modal>
      </div>
    );
  }
});

UpdatePwdModal = Form.create()(UpdatePwdModal);
export default UpdatePwdModal
